﻿import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1

Rectangle {
    id: rectangle1
    color:"transparent"//Qt.rgba(97/255,178/255,244/255,1)
    anchors.fill: parent
    width: 400
    height: 600
    property int columnWidth: 120
    MouseArea{
        anchors.fill: parent
        onClicked: rectangle1.focus = true
    }

    ListModel {
        id: cbItems
        ListElement { text: "Banana"; }
        ListElement { text: "Apple";}
        ListElement { text: "Coconut";}
    }

    ColumnLayout{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.topMargin: 20
        spacing: 30

        ComboBox {
            model: cbItems
            implicitWidth: columnWidth
        }

        ComboBox {
            model: ["Paris", "Oslo", "New York"]
            implicitWidth: columnWidth
        }

        ComboBox {
             editable: true
             model: cbItems
             onAccepted: {
                 if (find(currentText) === -1) {
                     cbItems.append({text: editText})
                     currentIndex = find(editText)
                 }
             }
        }
        ComboBox {
            id:cmb4
            property string borderColor: "transparent"
            property int borderWidth: 1
            implicitWidth: columnWidth
            implicitHeight:30
            model: cbItems
            style: ComboBoxStyle{
                id:style
                background:Rectangle {
                    id:background
                    width: control.width - cmb4.borderWidth
                    height: control.height - cmb4.borderWidth
                    border.color: cmb4.borderColor
                    border.width: cmb4.borderWidth
                    color: Qt.rgba(114/255,203/255,251/255,1)
                    radius: height/2
                    Image {
                        id: imageDropdown
                        width: height
                        height: 0.5 * parent.height
                        anchors.right: parent.right
                        anchors.rightMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        fillMode: Image.Stretch
                        source: "images/combobox_down.png"
                    }
                }
                label: Text {
                    id: text1
                    height: control.height
                    color: "white"
                    text:control.currentText
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }
                selectionColor:"#72cbfb"
            }
        }

        Item{
            Layout.fillHeight: true;
        }
    }

    focus: true
}
